<template>
  <uni-nav-bar title="店家" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="dian">
    <image :src="storeS.image" mode="scaleToFill" class="acceptImg" v-if="storeS.image"></image>
    <view v-if="storeS.status!=1">该店铺已打样</view>
  </view>
  <view class="package parlour">
    <view class="title_parlour">
      <view>{{storeS.name}}</view>
      <view>营业时间: {{storeS.time}}</view>
      <view>店铺地址:{{storeS.address}}</view>
    </view>
    <view class="text_parlour">
      <view class="text">距离{{storeS.distance}}</view>
      <view class="list">
        <view class="lists" @click="openNavigaPad()">
          <uni-icons type="paperplane" size="22"></uni-icons>
          <text>导航</text>
        </view>
        <view class="lists" @click="telCall(storeS.phone)">
          <uni-icons type="phone" size="22"></uni-icons>
          <text>电话</text>
        </view>
      </view>
    </view>
  </view>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="package scroll-box"
    :style="{ height: pageHeight + 'px',padding:'5rpx 0px' }" v-if="orderLists&&orderLists.length>0">
    <view v-for="item in orderLists" :key='item.id'>
      <ShopList :type="'distance'" :shoppAll="item" :shopID="shopID"></ShopList>
    </view>
  </scroll-view>
  <Lotlats @position="position"></Lotlats>
  <!-- 导航-->
  <NavigationS :currentLot="lon" :currentLat="lat" :longitude="storeS.longitude" :latitude="storeS.latitude"
    :addres="storeS.address" :name="storeS.name" ref="NavigationPopup">
  </NavigationS>
</template>

<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import ShopList from '@c/groupBenefits/shopGrid.vue';
  import Lotlats from '@c/team/Lotlat.vue';
  import NavigationS from '@c/mapFilling/Navigation.vue';
  import { telCall } from '@/utils/copyText';

  import { toPublish } from '@mqtt';
  import { isH5 } from '@/utils/platform';
  import { shopp, shoppList } from '@/gql/shop';
  import { onLoad } from '@dcloudio/uni-app';
  import { ref, Ref } from 'vue';
  /**
   * 店铺主页
   * @param lon 经度
   * @param lat 纬度
   * @param storeS 店铺详情
   * @param shopID 店铺ID
   * @param NavigationPopup 导航组件值
   * @param isLoading 上拉加载状态
   * @param lastPage 商品分页
   * @param currentPage 当前获取页数
   * @param orderLists 商品列表
   * @param pageHeight 商品高度
   */
  const lon = ref()
  const lat = ref()
  const storeS : Ref<any> = ref({});
  const shopID = ref()
  const NavigationPopup = ref(null)

  const isLoading = ref(false);
  const lastPage = ref(1);
  const currentPage = ref(1);
  const orderLists = ref([]);

  const pageHeight = ref('');
  onLoad((pearm) => {
    shopID.value = pearm.id
    const num = isH5 ? 300 : 330
    uni.getSystemInfo({
      success: function (res) {
        pageHeight.value = (res.windowHeight - num).toString();
      },
    });
  })
  /**
   * 获取当前城市信息
   * @param {Object} lat 当前位置的纬度
   * @param {Object} lot 当前位置的经度
   * @return 初始化商品列表
   */
  function position(la : any, lo : any) {
    orderLists.value = []
    currentPage.value = 1
    console.log(la, lo);
    lon.value = lo
    lat.value = la
    init()
    shop()
  }

  function init() {
    const payload = {
      query: shopp,
      variables: {
        lon: Number(lon.value),
        lat: Number(lat.value),
        store_id: Number(shopID.value),
      },
    };
    toPublish('ql/store/getShopInfo', payload, (obj : any) => {
      const {
        shop
      } = obj.data;
      storeS.value = shop
      console.log(shop)
    });
  }

  function shop() {
    isLoading.value = true;
    const payload = {
      query: shoppList,
      variables: {
        lon: Number(lon.value),
        lat: Number(lat.value),
        store_id: Number(shopID.value),
        page: currentPage.value,
      },
    };
    toPublish('ql/store/getShopGoodsListByStore', payload, (obj : any) => {
      const {
        store_goods_list
      } = obj.data;
      isLoading.value = false;
      orderLists.value = [...orderLists.value, ...store_goods_list.list];
      lastPage.value = store_goods_list.lastpage;
    });
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      shop();
    }
  }
  /**
   * 调用导航选择框
   */
  function openNavigaPad() {
    NavigationPopup.value.NavigationLoc();
  }
</script>

<style scoped lang="less">
  @import url('../shopp/less/Shopkeeper.less');
</style>